import React from "react";
import { Switch } from "antd";
import 'styles/components/template/widget/switch-wrapper.scss';

export default class SwitchWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  // switch发生变化的时候触发
  onSwitchChange = (checked) => {
    this.props.onSwitchChange(this.props.fieldInfo, checked)
  }

  render() {
    const {
      fieldInfo = {},
      isHidden, // 是否展示“是否显示关联按钮”这个switch，true：展示，false：隐藏
      switchText, // switch的提示信息
      children,
      ...otherProps
    } = this.props;

    if (!isHidden) {
      return React.cloneElement(children, {...otherProps});
    }

    return (
      <div className={'switchWrapperContainer'}>
        <div>
          <div className={`switchLabel${!switchText || switchText.length === 0 ? ' noMargin' : ''}`}>{switchText || ''}</div>
          <div className={'switch'}>
            <Switch
              key={`${fieldInfo.fieldOID}-switch`}
              checked={this.props.isSwitchChecked}
              onChange={this.onSwitchChange}
            />
          </div>
        </div>
        <div className={'switchWrapperChildren'} style={{ display: this.props.isSwitchChecked ? 'block' : 'none' }}>
          {React.cloneElement(children, {...otherProps})}
        </div>
      </div>
    );
  }
}
SwitchWrapper.propTypes = {
  isHidden: React.PropTypes.bool, // 是否展示switch按钮（用来控制组件是否展示）
  switchText: React.PropTypes.string, // switch按钮的文本
  isSwitchChecked: React.PropTypes.bool, // switch按钮的打开关闭状态
  onSwitchChange: React.PropTypes.func.isRequired, // 当switch按钮的状态发生变化的时候触发
  field1: React.PropTypes.object // 组件的配置信息
};
SwitchWrapper.defaultProps = {
  isHidden: false, // 是否展示switch按钮（用来控制组件是否展示）
  switchText: '', // switch按钮的文本
  isSwitchChecked: false, // switch按钮的打开关闭状态
  onSwitchChange: () => {}, // 当switch按钮的状态发生变化的时候触发
  field1: {} // 组件的配置信息
};
